<template>
    <div class="home">
        <div class="hello-box">
            <p class="header-hello">Hi {{mobile}},</p>
            <p class="welcome">您好！欢迎来到GLP游戏化学习平台，准备开始挑战自我了吗？</p>
        </div>
        <!-- <div class="public-header panel-header">
            <div class="public-header-ch">公告栏</div>
            <div class="public-header-en">ANNOUNCEMENT</div>
            <div class="public-header-line"></div>
        </div>
        <div class="panel-body">
            <p class="no-announcement">当前没有公告，相聚一堂便是最好的开端。</p>
        </div> -->
        <div class="public-header">
            <div class="public-header-ch">商战模拟</div>
            <div class="public-header-en">ENTER SIMULATION</div>
            <div class="public-header-line"></div>
        </div>
        <!-- 应用背景图start -->
        <div class="panel-simulation">
            <div class="panel-img"><img src="../../static/image/icon-title.png"></div>
            <div class="course-pannel-total">
                <div class="course-pannel-all">
                    <div class="course-panel">
                        <div class="img-box">
                            <img src="../../static/image/xunlian.png">
                        </div>
                        <p class="course-panel-title">
                            人机训练
                        </p>
                        <div class="panel-line"></div>
                        <p class="course-panel-info">
                            <template v-if="opening.total">
                                课程名称：{{opening.data[0].title}}<br>
                                开始时间：{{opening.data[0].game_from}}
                            </template>
                            <template v-else="opening.total">
                                敬请期待！
                            </template>
                        </p>
                    </div>
                    <div class="course-panel course-panel-hover">
                        <router-link :to="{name:'markSimos'}">
                            <div class="img-box">
                                <img src="../../static/image/icon-study.png">
                            </div>
                            <p class="course-panel-title">
                                我的课程
                            </p>
                            <div class="panel-line"></div>
                            <p class="course-panel-info">
                                <template v-if="opening.total">
                                    课程名称：{{opening.data[0].title}}<br>
                                    开始时间：{{opening.data[0].game_from}}
                                </template>
                                <template v-else="opening.total">
                                    您当前还没有加入任何课程<br>
                                    如需帮助请联系系统管理员
                                </template>
                            </p>
                            <router-link class="button-common" :class="{'button-disabled':!opening.total}" to="markSimos">
                                进入课程
                            </router-link>
                            <!-- <a class="button-common" :class="{'button-disabled':!opening.total}" :href="'/course-marksimos-detail?epic_id='+ (opening.total&&opening.data[0].epic_id)">
                                进入课程
                            </a> -->
                        </router-link>
                    </div>
                    <div class="course-panel">
                        <div class="img-box">
                            <img class="img-game" src="../../static/image/bisai.png">
                        </div>
                        <p class="course-panel-title">
                            我的比赛
                        </p>
                        <div class="panel-line"></div>
                        <p class="course-panel-info">
                            <template v-if="opening.total">
                                课程名称：{{opening.data[0].title}}<br>
                                开始时间：{{opening.data[0].game_from}}
                            </template>
                            <template v-else="opening.total">
                                敬请期待！
                            </template>
                        </p>
                    </div>
                </div>
            </div>
            <!-- 攻略百科 -->
            <div class="strategy-total">
                <div class="public-header panel-header">
                    <div class="public-header-ch">攻略百科</div>
                    <div class="public-header-en">STRATEGY GUIDE</div>
                    <div class="public-header-line"></div>
                </div>
                <div class="strategy-contant">
                    <div class="strategy-game">
                        <div class="strategy-normal" v-for="strategy in strategys" :key="strategy.index">
                            <p class="strategy-img"><img :src="strategy.strategysImg"></p>
                            <p class="strategy-title">{{strategy.strategysTitle}}</p>
                            <p class="strategy-line"></p>
                            <p class="strategy-sub">{{strategy.strategysSub}}</p>
                            <p class="strategy-hover">查看详情</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 应用背景图end -->
       <div class="public-header panel-header">
            <div class="public-header-ch">大师讲坛</div>
            <div class="public-header-en">MASTER TALKS</div>
            <div class="public-header-line"></div>
        </div>
        <div class="panel-master">
            <img src="../../static/image/zuoyinhao.png" alt="">
            <span>敬请期待</span>
            <img src="../../static/image/youyinhao.png" alt="">
        </div>
        <div class="public-header panel-header">
            <div class="public-header-ch">高手回顾</div>
            <div class="public-header-en">CONTESTS REVIEW</div>
            <div class="public-header-line"></div>
        </div>
        <!-- 视频 start-->
        
        <div  id='modalVideo' class="modalMask" style="display:none">
            <div class="modalVideo">
                <img class="modalImg" src="../../static/image/back.png" @click="showVideo($event)">
                <!-- <img class="modalImg" src="../../static/image/back.png" @click="showVideo($event)"> -->
                <video id="modalVideos" :src="clickLinkAddress" width="850" height="500" controls autoplay></video>
            </div>
        </div>
        <!-- 视频播放弹框 -->
        <div class="reviewTips">
            <div class="reviewTip" v-for="allList in allLists" :key="allList.id" :data-type="allList.videoType" >
                <a @click="chuanInforma(allList.id,allList.linkAddress)">
                    <div class="reviewLeft">
                        <video :src="allList.linkAddress" :poster="allList.picUrl"></video>
                        <div class="videoHover" >
                        <!-- <div class="videoHover" @mouseenter="mplay($event)" @mouseleave="mplay($event)" @click="showVideo($event,allList.linkAddress)"> -->
                            <div class="videoContant">
                                <p class="hoverTitle">{{allList.videoName}}</p>
                                <p class="hoverLine"></p>
                                <p class="hoverSub">{{allList.description}}</p>
                                <p class="hoverImg"><img src="../../static/image/icon-video-play.png" alt=""></p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>    
        </div>
        <!-- 视频 end-->
        
        <div class="public-header panel-header">
            <div class="public-header-ch">我的成长</div>
            <div class="public-header-en">MY PROGRESS</div>
            <div class="public-header-line"></div>
        </div>
        <div class="panel-progess">
            <span>每一次记录，为了您向下一个目标前进。</span>
        </div>
        <div class="public-header panel-header">
            <div class="public-header-ch">热门课程</div>
            <div class="public-header-en">RECOMMENDED CLASSES</div>
            <div class="public-header-line"></div>
        </div>
        <div class="panel-recommended-classes">
            <img  src="../../static/image/icon-logo.png" >
            <img  src="../../static/image/tu1.png" >
            <img  src="../../static/image/tu2.png" >
            <img  src="../../static/image/tu3.png" >
            <img  src="../../static/image/tu4.png" >
            <img  src="../../static/image/tu5.png" >
            <img  src="../../static/image/tu6.png" >
            <img  src="../../static/image/tu7.png" >
        </div>
        <!-- 学员信息不完整提示信息 Dialog start-->
        <el-dialog
        title="请完善你的信息"
        :visible.sync="dialogVisible"
        class="dialogVisible"
        >
        <div class="dialogContant">
            <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" :label-position="labelPosition" class="demo-ruleForm">
                <div class="forms-line clear">
                    <el-form-item label="姓名" prop="name" class="forms-name">
                        <el-input v-model="ruleForm.name" placeholder="请输入姓名" ></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex" class="forms-sex">
                        <!-- <el-select v-model="ruleForm.sex" placeholder="男">
                            <el-option label="男" value="male"></el-option>
                            <el-option label="女" value="female"></el-option>
                        </el-select> -->
                        <select class="form-sex" placeholder="男" v-model="ruleForm.sex" @blur="validatesex('sex')" @change="validatesex('sex')">
                          <option class="form-default" value="" disabled selected hidden>男</option>
                          <option v-for="(sexList,index) in sexLists" v-bind:value="sexList.value" :key="index">{{sexList.text}}</option>                
                        </select>
                        <div class="cue" v-show="sexErr">请输入性别</div>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age" class="forms-sex">
                        <select class="form-sex" placeholder="1-3年" v-model="ruleForm.age" @blur="validateage('age')" @change="validateage('age')">
                          <!-- <option class="form-default" value="" disabled selected hidden>1-3年</option> -->
                          <option v-for="(ageList,index) in ageLists" v-bind:value="ageList.value" :key="index">{{ageList.text}}</option> 
                          
                        </select>
                        <div class="cue" v-show="ageErr">请输入年龄</div>
                    </el-form-item>
                </div>
                <div class="forms-line clear"> 
                    <el-form-item label="子公司/部门" prop="department" class="forms-name">
                        <el-input v-model="ruleForm.department" placeholder="请输入子公司/部门" ></el-input>
                    </el-form-item>
                    <el-form-item label="职位" prop="position" class="forms-name">
                        <select class="form-position" placeholder="请选择" v-model="ruleForm.position" @blur="validateposition('position')" @change="validateposition('position')">
                          <option class="form-default" value="0" disabled selected hidden>请选择</option>
                          <option v-for="positionList in positionLists" v-bind:value="positionList.id" :key="positionList.id">{{positionList.positionName}}</option>                
                        </select>
                        <div class="cue" v-show="positionErr">请输入职位</div>
                    </el-form-item>
                </div>
                <el-form-item class="modifypas">
                    <el-button type="primary" class="resetPsd" @click="completeUserInfo">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        </el-dialog>
        <!-- 学员信息不完整提示信息 Dialog ending-->
    </div>
</template>
<script type="text/javascript">
    import Videos from "../json/videos";
	export default{
		data(){
            // 姓名验证
            var name = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入姓名'));
                }
                callback();
            };
            // 子公司/部门验证
            var department = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入子公司/部门'));
                }
                callback();
            };
			return{
                // 学员信息不完整提示信息 Dialog
                dialogVisible:true,
            //验证为空提示
                // 性别验证
                sexErr:false,
                sexLists:[
                    {
                        text:'男', value:'男'
                    },
                    {
                        text:'女', value:'女'
                    },
                ],
                // 职位验证
                positionErr:false,
                positionLists:[
                ],
                // 年龄验证
                ageErr:false,
                ageLists:[
                    {
                        text:'1', value:1
                    },
                    {
                        text:'2', value:2
                    },
                    {
                        text:'3', value:3
                    },
                ],
                // 对齐方式
                labelPosition:'top',
                // status-icon:true,
                ruleForm:{
                    name:'',
                    sex:'',
                    position:'',
                    age:'',
                    department:'',
                    },
                    rules:{
                        name:[
                            { validator: name, trigger: 'blur', required: true, }
                        ],
                        department:[
                            { validator: department, trigger: 'blur', required: true, }
                        ],
                },
                isClick:false,
                clickLinkAddress:'',
				collapsed: false,
                activeModal: "",
                coverPathBase: "http://p55wvkj9l.bkt.clouddn.com/",
                tabActive: 0,
                contestList: Videos,
                prop: "",
                mobile:"",
                opening:{},
                strategys:[
                    {
                        strategysImg:'../../static/image/youxijieshao.png',
                        strategysTitle:'游戏介绍',
                        strategysSub:'MarkSimos商战模拟游戏的概述',
                    },
                    {
                        strategysImg:'../../static/image/lilungongju.png',
                        strategysTitle:'理论工具',
                        strategysSub:'帮助你系统学习课程中运用到的理论和工具',
                    },
                    {
                        strategysImg:'../../static/image/xiangguancitiao.png',
                        strategysTitle:'相关词条',
                        strategysSub:'游戏中的词条，有些MBA同学也不一定知道哦',
                    },
                ],
                
                // 视频
                allLists:[],                
			}
		},
		methods: {
            // 视频
            courseHome: function(){
                this.$http.courseHome(null,(res)=>{
                    this.allLists = res.data;
                    console.log(res);
                },(errRes)=>{
                    console.log(errRes)
                })
            },
			loadMobile: function () {
                
            },
            loadOpening: function () {
                
            },
            // 鼠标移上去自动播放
            // mplay: function(event){
            //     if (event != undefined) {
            //        let video = event.currentTarget.previousSibling.previousSibling;
            //         if (video.paused) {
            //             video.play();
            //         }else{
            //             video.pause();
            //         }
            //     }
            // },
            // 点击播放
            // showVideo:function(event,a){
            //     // let modalVideo = document.getElementById('modalVideo');
            //     // modalVideo.pause();
            //     if (event != undefined) {
            //         this.clickLinkAddress = a;
            //         document.getElementById('modalVideo').firstChild.currentTime = 0
            //         if (this.isClick){
            //             let video = document.getElementById('modalVideo').style.display = 'none';
            //             this.isClick = false;
            //         }else{
            //             let video = document.getElementById('modalVideo').style.display = 'block';
            //             this.isClick = true;
            //         }
                    
            //     }
            // }
            chuanInforma(id,linkAddress){
            // this.$router.push({name:'master-review',params:{videoType:videoType}})
            // console.log("视频类型:" + videoType)
            this.$router.push({name:'master-review',params:{id:id,linkAddress : linkAddress}})
            console.log("视频id:" + id, '地址：' + linkAddress)
            },
            // 性别验证
            validatesex:function(){
                if(this.ruleForm.sex == ''){
                    this.sexErr = true;
                }else{
                    this.sexErr = false;
                }
            },
            // 职位验证
            validateposition:function(){
                if(this.ruleForm.position == ''){
                    this.positionErr = true;
                }else{
                    this.positionErr = false;
                }
            },
            // 年龄验证
            validateage:function(){
                if(this.ruleForm.age == ''){
                    this.ageErr = true;
                }else{
                    this.ageErr = false;
                }
            },
            // 获取所有职位
            getPosition(){
                this.$http.getPosition(null,(res)=>{
                this.positionLists = res.data
                console.log(res)
                },(errRes)=>{
                console.log(errRes)
                })
            },
            //完善学员信息
            completeUserInfo:function(){
                let data={
                    mobile: JSON.parse(sessionStorage.getItem('login')).mobile,
                    name: this.ruleForm.name,
                    gender: this.ruleForm.sex,
                    position: this.ruleForm.position,
                    age: this.ruleForm.age,
                    department: this.ruleForm.department,
                }
                this.$http.completeUserInfo(data,(res)=>{
                    if(res.errCode == 0){
                        let currentAdminInfo = sessionStorage.getItem('login');
                        let currentAdminInfoObj = JSON.parse(currentAdminInfo);
                        
                        // 已有的字段
                        this.ruleForm.name = currentAdminInfoObj.name;
                        this.ruleForm.sex = currentAdminInfoObj.gender;
                        this.ruleForm.position = currentAdminInfoObj.position;
                        this.ruleForm.age = currentAdminInfoObj.age;
                        this.ruleForm.department = currentAdminInfoObj.department;
                        // 修改的字段
                        currentAdminInfoObj.name = this.ruleForm.name;
                        currentAdminInfoObj.gender = this.ruleForm.sex;
                        currentAdminInfoObj.position = this.ruleForm.position;
                        currentAdminInfoObj.age = this.ruleForm.age;
                        currentAdminInfoObj.department = this.ruleForm.department;
                        
                        let currentAdminInfoStr = JSON.stringify(currentAdminInfoObj);
                        sessionStorage.setItem('login',currentAdminInfoStr)
                    }
                    this.dialogVisible = false;
                    console.log(res)
                },(errRes)=>{
                    console.log(errRes)
                })
            },
            //判断学员信息是否完整
            judgeInformation:function(){
                var judgeInfoIsFull = JSON.parse(sessionStorage.getItem('login')).infoIsFull;
                if(judgeInfoIsFull == 0){
                    this.dialogVisible = true;
                }else{
                    this.dialogVisible = false;
                }
            },
        },
		created(){

		},
		mounted(){
            this.judgeInformation();
            this.courseHome();
            this.getPosition();
        }
	}
</script>